<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layout">
<head>
    <title th:text="${selectedProject.getName()}"></title>
    <meta property="og:title" th:attr="content=${selectedProject.getName()}"/>
    <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/project.css}" />
</head>
<body>
<div layout:fragment="header-container"></div>
<div layout:fragment="~{content}">
    <div class="container-fluid"></div>
    <div></div>
    <div class="compass body--container container-fluid">
        <div class="row">
            <div class="sidebar hide-sm col-md-3">
                <ul class="sidebar_main">
                    <li class="sidebar_head">Projects</li>
                    <li class="sidebar_project"
                        th:each="proj : ${projects}"
                        th:classappend="${proj.getId() ==  selectedProject.getId()} ? 'active' : (${proj.getId() ==  selectedProject.getParentId()} ? 'child-active': 'child-inactive')"
                        th:with="isChildrenOpen=(${proj.equals(selectedProject)} or ${proj.equals(selectedProject.getParentProject())}) and ${proj.getChildProjectList()} and ${proj.getChildProjectList().size()} > 0">
                        <div>
                            <a th:href="${proj.getSiteUrl()}" th:text="${proj.getName()}"></a>
                            <i th:if="${!isChildrenOpen && proj.getChildProjectList() != null && proj.getChildProjectList().size() > 0}"
                               class="fas fa-chevron-right" aria-hidden="true"></i>
                            <i th:if="${isChildrenOpen && proj.getChildProjectList() != null && proj.getChildProjectList().size() > 0}"
                               class="fas fa-chevron-down" aria-hidden="true"></i>
                        </div>
                        <ul class="sidebar_children" th:if="${isChildrenOpen}">
                            <li class="sidebar_child" th:each="childProject : ${proj.getChildProjectList()}"
                                th:classappend="${childProject.getId() ==  selectedProject.getId()} ? 'active'">
                                <a th:href="${childProject.getSiteUrl()}">
                                    <span th:text="${childProject.getName()}"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <article class="col-xs-12 col-md-9 col-project-content"
                     th:with="hasSamples=${selectedProject.projectSamples.size() > 0},hasDocumentation=${currentRelease.isPresent() || otherReleases.size() > 0 || guides.size() > 0}">

                <div class="box project-content">
                    <div class="">
                        <div class="project--header">
                            <h1 th:text="${selectedProject.getName()}"></h1>
                            <span class="version label current" th:if="${currentRelease.isPresent()}"
                                  th:with="release=${currentRelease.get()}"
                                  th:text="${release.getVersionDisplayName()}">
                        </span>
                            <div class="social-links">
                                <a th:href="${selectedProject.getRepoUrl()}" target="_blank" class="link--github">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                         version="1.1" id="Capa_1" x="0px" y="0px" width="438.549px" height="438.549px"
                                         viewBox="0 0 438.549 438.549"
                                         style="enable-background:new 0 0 438.549 438.549;" xml:space="preserve"
                                         class="svg replaced-svg">
                                <g>
                                    <path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365   c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63   c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996   c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136   c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559   c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559   c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997   c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851   c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136   c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41   c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126   c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817   c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994   c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849   c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24   c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979   c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146   c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995   c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906   C438.536,184.851,428.728,148.168,409.132,114.573z"></path>
                                </g>
                                </svg>
                                </a>

                                <a th:href="${projectStackOverflow}" target="_blank" class="link--stackoverflow">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.2 30.2">
                                        <circle cx="15.1" cy="15.1" r="15.1"/>
                                        <g>
                                            <path d="M20.27,22.39V17.64h1.58V24H7.62V17.64H9.19v4.75Z" class="shape-color-2"/>
                                            <path d="M10.93,17.19l7.74,1.62L19,17.25l-7.74-1.62Zm1-3.69,7.16,3.34.66-1.43-7.17-3.36Zm2-3.52L20,15l1-1.21L15,8.77Zm3.94-3.75-1.27.95,4.71,6.34,1.26-.94ZM10.77,20.79h7.9V19.22h-7.9Z" class="shape-color-2"/>
                                        </g>
                                    </svg>
                                </a>
                            </div>
                        </div>

                        <ul id="nav-project" class="nav nav-tabs">
                            <li class="active">
                                <a href="#overview" data-toggle="tab">
                                    <i class="icon-eye-open"></i>
                                    <span class="hide-sm">Overview</span>
                                </a>
                            </li>
                            <li th:if="${hasDocumentation}" class="">
                                <a href="#learn" data-toggle="tab">
                                    <i class="icon-file-text-alt"></i>
                                    <span class="hide-sm">Learn</span>
                                </a>
                            </li>
                            <li th:if="${hasSamples}" class="">
                                <a href="#samples" data-toggle="tab">
                                    <i class="icon-code"></i>
                                    <span class="hide-sm">Samples</span>
                                </a>
                            </li>
                        </ul>


                        <div class="tab-content" id="content-project">
                            <div class="tab-pane active" id="overview">
                                <div class="compass-section">
                                    <div class="project-overview">
                                        <div th:utext="${selectedProject.getRenderedOverview()}"></div>
                                    </div>
                                    <div th:if="${selectedProject.getRenderedBootConfig()} and ${#strings.length(selectedProject.getRenderedBootConfig()) > 0} "
                                         class="spring-boot-config">
                                        <h2>Spring Boot Config</h2>
                                        <div th:utext="${selectedProject.getRenderedBootConfig()}"></div>
                                    </div>
                                    <div class="quickstart">
                                        <img th:src="@{/images/spring-initializr.svg}" alt='Spring Initializr'>
                                        <h2>Quickstart Your Project</h2>
                                        <div>
                                            Bootstrap your application with
                                            <a class="quickstart--button" href="https://start.spring.io/"
                                               target="_blank">
                                                Spring Initializr</a>.
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="learn" th:if="${hasDocumentation}" class="tab-pane">
                                <div th:if="${currentRelease.isPresent() || otherReleases.size() > 0}"
                                     class="project--documentation compass-section">

                                    <h2>Documentation</h2>
                                    <div class="project--documentation--subtitle compass-subtitle">
                                        Each <strong>Spring project</strong> has its own; it explains in great details
                                        how
                                        you can use <strong>project features</strong> and what you can achieve with
                                        them.
                                    </div>

                                    <table class="table table--documentation">
                                        <tbody>
                                        <tr th:if="${currentRelease.isPresent()}"
                                            th:with="release=${currentRelease.get()}">
                                            <td>
                                        <span class="release-display-name" th:text="${release.getVersionDisplayName()}">
                                        </span>
                                                <span class="version label pre"
                                                      th:if="${release.isPreRelease()}">PRE</span>
                                                <span class="version label snapshot"
                                                      th:if="${release.isSnapshot()}">SNAPSHOT</span>
                                                <span class="version label current"
                                                      th:if="${release.isCurrent()}">CURRENT</span>
                                                <span class="version label ga"
                                                      th:if="${release.isGeneralAvailability()}">GA</span>
                                            </td>
                                            <td>
                                                <a th:href="${release.getRefDocUrl()}">
                                                    Reference Doc.
                                                </a>
                                            </td>
                                            <td>
                                                <a th:href="${release.getApiDocUrl()}">
                                                    API Doc.
                                                </a>
                                            </td>
                                        </tr>

                                        <tr th:each="release : ${otherReleases}">
                                            <td>
                                        <span class="release-display-name" th:text="${release.getVersionDisplayName()}">
                                        </span>
                                                <span class="version label pre"
                                                      th:if="${release.isPreRelease()}">PRE</span>
                                                <span class="version label snapshot"
                                                      th:if="${release.isSnapshot()}">SNAPSHOT</span>
                                                <span class="version label current"
                                                      th:if="${release.isCurrent()}">CURRENT</span>
                                                <span class="version label ga"
                                                      th:if="${release.isGeneralAvailability()}">GA</span>
                                            </td>
                                            <td>
                                                <a th:href="${release.getRefDocUrl()}">
                                                    Reference Doc.
                                                </a>
                                            </td>
                                            <td>
                                                <a th:href="${release.getApiDocUrl()}">
                                                    API Doc.
                                                </a>
                                            </td>
                                        </tr>

                                        </tbody>
                                    </table>

                                </div>

                                <div th:if="${guides.size() > 0}"
                                     class="project--guides project--samples compass-section">
                                    <h2 class="project--guides--title">Guides</h2>
                                    <div class="project--guides--subtitle compass-subtitle">
                                        Designed to be completed in <strong>15-30 minutes</strong>, a guide provides
                                        quick,
                                        hands-on instructions for <strong>building a starter app</strong> for any
                                        development
                                        task with <strong>Spring</strong>.
                                    </div>

                                    <ul class="project--list-links">
                                        <li th:each="guide : ${guides}">
                                            <a th:href="'/guides/gs/' + ${guide.name}">
                                                <span class="icon">
                                                    <div class="guide-icon" layout:include="svg/_icons :: icon-guides-start"></div>
                                                </span>
                                                <strong class="project--sample--title"
                                                        th:text="${guide.getTitle()}"></strong>
                                                <span class="project--sample--description"
                                                      th:text="${guide.getDescription()}"></span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                                <div th:if="${topicals.size() > 0}"
                                     class="project--guides project--samples compass-section">
                                    <h2 class="project--guides--title">Topics</h2>
                                    <div class="project--guides--subtitle compass-subtitle">
                                        Designed to be read and comprehended in an hour or less, providing more
                                        wide-ranging or subjective content than a getting started guide.
                                    </div>

                                    <ul class="project--list-links">
                                        <li th:each="guide : ${topicals}">
                                            <a th:href="'/guides/topicals/' + ${guide.name}">
                                                <span class="icon">
                                                    <div class="guide-icon" layout:include="svg/_icons :: icon-guides-topic"></div>
                                                </span>
                                                <strong class="project--sample--title"
                                                        th:text="${guide.getTitle()}"></strong>
                                                <span class="project--sample--description"
                                                      th:text="${guide.getDescription()}"></span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                                <div th:if="${tutorials.size() > 0}"
                                     class="project--guides project--samples compass-section">
                                    <h2 class="project--guides--title">Tutorials</h2>
                                    <div class="project--guides--subtitle compass-subtitle">
                                        Designed to be completed in 2-3 hours, these guides provide deeper, in-context
                                        explorations of enterprise application development topics, leaving you ready to
                                        implement real-world solutions.
                                    </div>

                                    <ul class="project--list-links">
                                        <li th:each="guide : ${tutorials}">
                                            <a th:href="'/guides/tutorials/' + ${guide.name}">
                                                <span class="icon">
                                                    <div class="guide-icon" layout:include="svg/_icons :: icon-guides-tutorial"></div>
                                                </span>
                                                <strong class="project--sample--title"
                                                        th:text="${guide.getTitle()}"></strong>
                                                <span class="project--sample--description"
                                                      th:text="${guide.getDescription()}"></span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div id="samples" th:if="${hasSamples}" class="tab-pane">
                                <div class="project--samples compass-section">
                                    <h2>A few examples to try out:</h2>
                                    <ul class="project--list-links">
                                        <li th:each="sample : ${selectedProject.projectSamples}">
                                            <a th:href="${sample.getUrl()}" target="_blank">
                                                <span class="icon">
                                                    <div class="guide-icon" layout:include="svg/_icons :: icon-guides-tutorial"></div>
                                                </span>
                                                <strong class="project--sample--title"
                                                        th:text="${sample.getTitle()}"></strong>
                                                <span class="project--sample--description"
                                                      th:text="${sample.getDescription()}"></span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </article>
            <script th:src="@{/js/project.js}"></script>
        </div>
    </div>
</div>
</body>
</html>